<template>
  <div class="angle-content">
    <div class="item-box">
      <div class="angle-tit">相机位置：</div>
      <div class="angle-tit">x:</div>
      <input type="text" value="0" style="width: 40px" class="angle-input" v-model.number="cameraPos.x" />
      <div class="angle-tit">y:</div>
      <input type="text" value="0" style="width: 40px" class="angle-input" v-model.number="cameraPos.y" />
      <div class="angle-tit">z:</div>
      <input type="text" value="0" style="width: 40px" class="angle-input" v-model.number="cameraPos.z" />
    </div>
    <div class="item-box">
      <div class="angle-tit">相机目标：</div>
      <div class="angle-tit">x:</div>
      <input type="text" value="0" style="width: 40px" class="angle-input" v-model.number="targetPos.x" />
      <div class="angle-tit">y:</div>
      <input type="text" value="0" style="width: 40px" class="angle-input" v-model.number="targetPos.y" />
      <div class="angle-tit">z:</div>
      <input type="text" value="0" style="width: 40px" class="angle-input" v-model.number="targetPos.z" />
    </div>

    <div class="item-box">
      <div class="angle-tit">相机最近单位:</div>
      <input type="text" value="0" style="width: 40px" class="angle-input" v-model.number="near" />
      <div class="angle-tit">相机最远单位:</div>
      <input type="text" value="0" style="width: 40px" class="angle-input" v-model.number="far" />
    </div>

    <div class="item-box">
      <div class="angle-tit">最小仰角:</div>
      <input type="text" value="0" style="width: 40px" class="angle-input" v-model.number="minPolarAngle" />
      <div class="angle-tit">最大仰角:</div>
      <input type="text" value="0" style="width: 40px" class="angle-input" v-model.number="maxPolarAngle" />
    </div>

    <div class="item-box">
      <div class="angle-tit">是否开启阻尼:</div>
      <div>
        <el-switch v-model="zuni" active-color="#1890FF" inactive-color="#1890FF">
        </el-switch>
      </div>
      <div class="angle-tit">阻尼系数:</div>
      <input type="text" value="0" style="width: 40px" class="angle-input" v-model.number="dampingFactor" />
    </div>

    <div class="item-box">
      <div class="angle-tit">是否开启惯性:</div>
      <div>
        <el-switch v-model="guanxing" active-color="#1890FF" inactive-color="#1890FF">
        </el-switch>
      </div>
      <div class="angle-tit">是否禁止平移:</div>
      <div>
        <el-switch v-model="pingyi" active-color="#1890FF" inactive-color="#1890FF">
        </el-switch>
      </div>
    </div>

    <div class="item-box">
      <div class="angle-tit">环境光颜色:</div>
      <div>
        <el-color-picker v-model="color"></el-color-picker>
      </div>
    </div>

    <div class="item-box" style="padding-top: 0;padding-left: 120px;">
      <button type="primary" size="mini" @click="onApply" class="item-button">
        确定
      </button>
      <button type="primary" size="mini" @click="onSave" class="item-button1">
        保存
      </button>
    </div>
  </div>
</template>
<script>
const { ipcRenderer } = window.require('electron');
export default {
  components: {},
  data() {
    return {
      color: null,
      zuni: false,
      guanxing: false,
      pingyi: false,
      // 相机位置
      cameraPos: { x: 0, y: 0, z: 0 },
      // 相机目标
      targetPos: { x: 0, y: 0, z: 0 },
      // 裁剪面
      near: 0,
      far: 1000,
      // 仰角限制
      minPolarAngle: 0,
      maxPolarAngle: Math.PI,
      // 阻尼系数
      dampingFactor: 0,
      nodeData: {}
    };
  },
  created() { },
  methods: {
    onApply() {
      this.$emit("apply-camera-settings", {
        cameraPos: this.cameraPos,
        targetPos: this.targetPos,
        near: this.near,
        far: this.far,
        minPolarAngle: this.minPolarAngle,
        maxPolarAngle: this.maxPolarAngle,
        enableDamping: this.zuni,
        dampingFactor: this.dampingFactor,
        enableZoom: !this.pingyi,
        enableRotate: this.guanxing,
        color: this.color,
      });
    },
    onSave() {
      const saveData = {
        id: this.nodeData.id,
        name: this.nodeData.name,
        parentId: this.nodeData.parentId,
        cameraPos: this.cameraPos,
        targetPos: this.targetPos,
        near: this.near,
        far: this.far,
        minPolarAngle: this.minPolarAngle,
        maxPolarAngle: this.maxPolarAngle,
        enableDamping: this.zuni,
        dampingFactor: this.dampingFactor,
        enableZoom: !this.pingyi,
        enableRotate: this.guanxing,
        color: this.color,
      };
      const name = this.nodeData.name + "-" + this.nodeData.id;
      // localStorage.setItem(name, JSON.stringify(saveData));
      //setItem(name, JSON.stringify(saveData));
      ipcRenderer.send('store-set', name, saveData);
      this.$message.success("保存成功");
    },
    updateCameraAndTarget({ pos, target }) {
      console.log(target)
      this.cameraPos = {
        x: Math.round(pos.x),
        y: Math.round(pos.y),
        z: Math.round(pos.z)
      };
      this.targetPos = {
        x: Math.round(target.x),
        y: Math.round(target.y),
        z: Math.round(target.z)
      };
    },
    viewData(node) {
      this.nodeData = node
    },
  },
};
</script>

<style scoped lang="scss">
.angle-content {
  width: 100%;
  height: 100%;
  background-color: #2f2f2f;
  font-size: 11px;
  color: #d9d9d9;
  position: relative;
}

.item-box {
  width: 100%;
  padding: 5px 5px;
  display: flex;
  align-items: center;
}

.angle-input {
  height: 0.938333rem;
  line-height: 0.938333rem;
  background: #101418;
  border: 0.041667rem solid #101418;
  color: #fff;
  border-radius: 3px;
}

.angle-tit {
  margin-left: 5px;
  margin-right: 2px;
  color: #fbfbfb;
}

.item-button {
  width: 6vh;
  height: 2.5vh;
  background-color: #3157ba;
  color: #fff;
  border: #fbfbfb;
  border-radius: 3px;
}

.item-button1 {
  width: 6vh;
  height: 2.5vh;
  background-color: #3157ba;
  color: #fff;
  border: #fbfbfb;
  margin-left: 15px;
  border-radius: 3px;
}
</style>